<!--
* @description  : 案由选择
* @descriptionDetail: 案由选择
* @copyright    : 浙江烟草
* @author       : dw
* @create       : 2022-07-30 16:15:38
-->
<template>
	<view class="page case-bg">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<view class="nav-right-icon">
				<u-icon color="#FFF" name="list" size="38" @click="isOpen = true"></u-icon>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="case-main">
			<view class="header case-con">
				<view class="col con-one">
					主案由
				</view>
				<view class="col con-tow">
					辅案由
				</view>
				<view class="col con-three">
					案由名称
				</view>
			</view>
			<view class="case-body">
				<view class="ever-list case-con" v-for="(item, index) in caseList" :key="index">
					<view class="list-middle-radio con-one">
						<u-radio-group v-model="value" @change="radioGroupChange">
							<u-radio :name="item.name" :disabled="item.radioDisabled"></u-radio>
						</u-radio-group>
					</view>
					<view class="list-middle-checkBox con-tow">
						<u-checkbox shape="square" :name="item.name" :disabled="item.checkBoxDisabled" v-model="item.checked" @change="checkboxChange"></u-checkbox>
					</view>
					<view class="list-name con-three">
						<text :class="[(item.checked || item.name == value) ? 'name-info':'']" @click="esilTap(item, index)">
							{{ item.caseProperty }}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btns btn-other-cls" style="marginLeft:-32rpx">
			<u-button class="u-btn" type="primary" @click="mergeAdd">
				确定
			</u-button>
		</view>
		<u-popup mode="right" height="100%" width="80%" v-model="isOpen">
			<!-- 搜索列表 -->
			<view class="cearch_title">
				查询条件
			</view>
			<view class="title-content">
				<u-form class="search-pop" label-width="auto" label-position="top" :model="searchForm">
					<u-form-item label="案由分类:" prop="propertyType">
						<dic-input :keyWord="$u.dic.DIC_KEYS.C_PROPERTY_TYPE" :dicCode="searchForm.propertyType" :border="false" inputAlign="left" type="select" :select-open="dicSelectOpen('reason',$u.dic.DIC_KEYS.C_PROPERTY_TYPE)" placeholder="请选择" v-model="searchForm.propertyTypeName" @changeInputModelData="(name)=>{$set(searchForm, 'propertyTypeName', name)}" @click="showDic($u.dic.DIC_KEYS.C_PROPERTY_TYPE,searchForm.propertyType,'reason')" />
					</u-form-item>
					<u-form-item label="案由:">
						<u-input v-model="searchForm.caseProperty" />
					</u-form-item>
					<view class="submit-btns btn-other-cls" style="margin-left:-34rpx">
						<u-button plain class="del" type="primary" @click="resetClick">
							重置
						</u-button>
						<u-button class="mit" type="primary" @click="searchConfirm">
							确定
						</u-button>
					</view>
				</u-form>
			</view>
		</u-popup>
		<!-- 下拉选择用 -->
		<dic-choice :keyWord="dicKeyWords" :currentSelect="dicCurrentSelect" v-model="dicShow" @confirm="selectDicConfirm"></dic-choice>
		<!-- 违法情形 -->
		<u-popup v-model="showEsil" mode="bottom" length="80%">
			<multi-select :hasExts="false" title="违法情形" :options="esilList" :defaultUids="esilUids" @select="esilSelect"></multi-select>
		</u-popup>
	</view>
</template>

<script>
	// propertySmokeType  卷烟案由01电子烟案由02
	import caseService from "@/service/case/case.service";
	import DicInput from "@/components/dic_input.vue";
	import DicChoice from "@/components/dic_choice.vue";
	import MultiSelect from "@/components/multi-select.vue";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			DicInput,
			DicChoice,
			fabButton,
			MultiSelect,
		},
		data() {
			return {
				// 模拟案由列表数据
				caseList: [],
				value: "", // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				saveList: [], // 最终保存主案由和辅案由
				CheckBoxList: [], // 保存辅案由
				radioList: [], // 保存主案由
				currentRadio: 0, // 记录当前单选框索引
				currentCheckBox: -1, // 记录复选框索引
				handleProc: "1",
				searchForm: {
					propertyType:'01'
				},
				isOpen: false,
				dicShow: false,
				dicKeyWords: "", // dic 关键字
				dicCurrentSelect: "", // dic 当前选择项
				dicType: "",
				showEsil: false,
				curEsilIndex: -1,
				esilList: [],
				esilUids: [],
				casePropertyRelList: [],
				fContent: [{
					iconPath: require('@/static/sou.png'),
					selectedIconPath: require('@/static/sou.png'),
					text: '筛选',
					active: false,
				}],
			};
		},
		onLoad(opt) {
			this.handleProc = opt.handleProc || '1';
			this.casePropertyRelList = this.getRouteParam() || [];
		},
		mounted() {
			this.setRightBtns();
			this.init();
		},
		methods: {
			updateCaseCluesList() {
				this.CheckBoxList = [];
				for (let i = 0; i < this.casePropertyRelList.length; i++) {
					let tmpCPRL = this.casePropertyRelList[i];
					for (let j = 0; j < this.caseList.length; j++) {
						let tmpCl = this.caseList[j];
						if (tmpCPRL.casepropUuid == tmpCl.casepropUuid) {
							if (tmpCPRL.isMain) {
								this.value = tmpCl.name;
								this.radioList = [];
								this.radioList.push(this.value);
								tmpCl.checkBoxDisabled = true;
							} else {
								this.CheckBoxList.push(tmpCl.name);
								tmpCl.checked = true;
								if (tmpCPRL.smokeIllegalUuid) {
									tmpCl.smokeIllegalUuid = tmpCPRL.smokeIllegalUuid;
									let arTCl = tmpCPRL.smokeIllegalUuid.split(',');
									console.log(arTCl);
									if (tmpCl.electricSmokeIllegalList && tmpCl.electricSmokeIllegalList.length > 0) {
										tmpCl.electricSmokeIllegalList.forEach(io => {
											io.checked = arTCl.includes(io.smokeIllegalUuid);
										});
									}
								}
							}
							break;
						}
					}
				}
			},
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("筛选", () => {
					this.isOpen = true;
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.isOpen = true;
				}
			},
			init() {
				this.$modal.showLoading('加载中...');
				caseService.casePropertyList(this.searchForm.propertyType, this.searchForm.caseProperty).then(res => {
					this.$modal.hideLoading();
					if (!res.success) {
						this.$modal.alert("查询失败:" + res.msg);
						return;
					}
					res.data.forEach(itm => {
						itm.name = itm.casepropUuid;
						itm.checked = false;
						itm.checkBoxDisabled = false;
						itm.radioDisabled = false;
						// 违法情形 - 默认选中第一项
						if (itm.electricSmokeIllegalList && itm.electricSmokeIllegalList.length > 0) {
							itm.electricSmokeIllegalList[0].checked = true;
						}
					});
					this.caseList = [...res.data, ];
					this.updateCaseCluesList();
				}).catch(err => {
					this.$modal.hideLoading();
					this.$modal.alert("查询失败:" + err);
				});
			},
			dicSelectOpen(type, keyWords) {
				if (type == this.dicType) {
					if (this.dicKeyWords == keyWords && this.dicShow) {
						return true;
					}
					return false;
				}
			},
			showDic(key, cur, type) {
				if (this.dicShow) return;
				this.dicKeyWords = key;
				this.dicCurrentSelect = cur;
				this.dicShow = true;
				this.dicType = type;
			},
			selectDicConfirm(e) {
				if (this.dicKeyWords == this.$u.dic.DIC_KEYS.C_PROPERTY_TYPE) { // 未办证原因
					this.searchForm.propertyTypeName = e[0].label;
					this.searchForm.propertyType = e[0].extra.bcbCode;
				}
			},
			esilTap(item, index) {
				if (item.checked || item.name == this.value) {
					this.curEsilIndex = index;
					let tmpEleList = item.electricSmokeIllegalList || [];
					if (tmpEleList.length == 0) {
						this.$u.toast('没有可选的违法情形');
						return;
					}
					this.esilList = tmpEleList.map(itx => {
						return {
							uid: itx.smokeIllegalUuid,
							name: itx.illegalSituation,
						};
					});
					this.esilUids = (item.electricSmokeIllegalList.filter(itm => {
						return itm.checked;
					})).map(itp => {
						return itp.smokeIllegalUuid;
					});
					this.showEsil = true;
				}
			},
			esilSelect(e) {
				this.showEsil = false;
				if (this.curEsilIndex == -1) return;
				let choTuids = e.map(itx => {
					return itx.uid;
				}).join(',');
				this.caseList[this.curEsilIndex].electricSmokeIllegalList.forEach(itp => {
					itp.checked = choTuids.includes(itp.smokeIllegalUuid);
				});
				this.caseList[this.curEsilIndex].smokeIllegalUuid = choTuids;
			},
			// 筛选重置按钮
			resetClick() {
				this.searchForm = {};
			},
			// 筛选确认
			searchConfirm() {
				this.init();
				this.isOpen = false;
			},
			// 复选框  设置 checkbox 的 checked 属性判断是否选中
			checkboxChange(item) {
				this.currentCheckBox = -1;
				if (item.value) {
					this.CheckBoxList.push(item.name);
					this.CheckBoxList = this.uniqueArray(this.CheckBoxList);
				} else {
					// 移除
					this.CheckBoxList.forEach((item1, index1) => {
						if (item.name == item1) {
							this.currentCheckBox = index1;
						}
					})
					if (this.currentCheckBox == -1) return;
					this.CheckBoxList.splice(this.currentCheckBox, 1);
				}
			},
			// 单选框
			radioGroupChange(value) {
				// 初始化变量
				this.radioList = [];
				this.currentRadio = 0;
				let self = this;
				// 遍历的得到 当前的案由列表索引
				this.caseList.map((item, index) => {
					if (value == item.name) {
						self.currentRadio = index;
					}
				});
				// 点击单选框 禁用后面的复选框
				this.caseList.map((item, index) => {
					this.caseList[index].checkBoxDisabled = false;
				})
				this.caseList[this.currentRadio].checked = false;
				this.caseList[this.currentRadio].checkBoxDisabled = true;
				// 保存点击单选框选中的值
				this.radioList.push(value);
				console.log("点击了单选框第" + this.currentRadio + "个", "对应的值是：" + value);
				// 记录选中单选框后 后面的复选框被取消选中的索引
				self.currentCheckBox = -1;
				this.CheckBoxList.forEach((item, index) => {
					if (item == value) {
						self.currentCheckBox = index;
					}
				});
				if (this.currentCheckBox >= 0) {
					// 单击单选框，删除后面对应的值
					this.CheckBoxList.splice(this.currentCheckBox, 1);
				}
			},
			// 数组去重
			uniqueArray(arr) {
				let arr1 = []; // 新建一个数组来存放arr中的值
				for (let i = 0, len = arr.length; i < len; i++) {
					if (arr1.indexOf(arr[i]) === -1) {
						arr1.push(arr[i]);
					}
				}
				return arr1;
			},
			// 合并选中的单选和多选
			mergeAdd() {
				this.saveList = [];
				console.log(this.radioList, "radioList");
				console.log(this.CheckBoxList, "this.CheckBoxList")
				let self = this;
				this.caseList.forEach(itm => {
					if (this.radioList.includes(itm.casepropUuid)) {
						itm.isMain = true;
						self.saveList.push(itm);
					}
				});
				this.caseList.forEach(itm => {
					if (this.CheckBoxList.includes(itm.casepropUuid)) {
						itm.isMain = false;
						self.saveList.push(itm);
					}
				});
				if (this.saveList.length == 0) {
					this.$modal.alert("请选择案由");
				} else {
					self.backPrev({
						paramKey: "caseSelectionData",
						param: this.saveList,
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.cearch_title {
		background-color: #F3F4F5;
		width: 100%;
		height: 82rpx;
		font-size: 32rpx;
		font-weight: 600;
		padding: 22rpx 0 21rpx 32rpx;
		z-index: 999;
		position: fixed;
	}

	.title-content {
		width: 89%;
		margin: auto;
		padding-top: 76rpx;

		.query-btn {
			position: fixed;
			width: 95%;
			bottom: var(--window-bottom, 0);
		}
	}

	.case-bg {
		width: 100%;
		height: auto;
		padding: $cm-conent-padding-column $cm-content-paddng-row;
		background-color: $uni-bg-color-grey;

		.case-main {
			box-shadow: 0 0 16rpx -8rpx $uni-text-color;
			background-color: $uni-bg-color;
			margin-top: 2rpx;

			view[class^="col"] {
				color: $font-color-light;
				text-align: center;
				font-size: 26rpx;
			}

			.header {
				display: flex;
				padding: 20rpx 0;
				border-bottom: 2rpx solid $font-color-disabled;
			}

			.ever-list {
				height: auto;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid $font-color-disabled;

				view[class^="list-middle"] {
					text-align: center;
				}

				.list-name {
					display: inline-block;
					color: $uni-text-color;
					font-size: 24rpx;
				}
			}

			.mini-btns {
				margin-left: 20rpx;
			}
		}
	}

	.theme-color {
		color: $u-type-primary;
		margin-right: 30rpx;
	}

	// 公共布局
	.case-con {
		display: flex;

		.con-one {
			flex: 0.9;
		}

		.con-tow {
			flex: 0.9;
		}
       .con-four {
			flex: 0.7;
			text-align: center;
		}
		.con-three {
			flex: 3;
		}
	}

	.name-info {
		color: $u-type-primary;
	}

	.nav-right-icon {
		margin-right: 20rpx;
		color: white;
	}
</style>
